<template>
  <div class="app-container">
    <el-form ref="alipayForm" :model="alipayForm" :rules="alipayRules" style="margin-top: 6px;" size="small" label-width="100px">
      <el-form-item label="应用APPID" prop="appId">
        <el-input v-model="alipayForm.appId" style="width: 40%" />
        <span style="color: #C0C0C0;margin-left: 10px;">应用APPID,收款账号既是APPID对应支付宝账号</span>
      </el-form-item>
      <el-form-item label="商家账号" prop="merchantId">
        <el-input v-model="alipayForm.merchantId" style="width: 40%;" />
        <span style="color: #C0C0C0;margin-left: 10px;">商家账号</span>
      </el-form-item>
      <el-form-item label="商户私钥" prop="privateKey">
        <el-input v-model="alipayForm.privateKey" type="password" style="width: 40%;" />
        <span style="color: #C0C0C0;margin-left: 10px;">商户私钥，你的PKCS8格式RSA2私钥</span>
      </el-form-item>
      <el-form-item label="支付宝公钥" prop="publicKey">
        <el-input v-model="alipayForm.publicKey" type="password" style="width: 40%;" />
        <span style="color: #C0C0C0;margin-left: 10px;">支付宝公钥</span>
      </el-form-item>
      <el-form-item label="回调地址" prop="returnUrl">
        <el-input v-model="alipayForm.returnUrl" style="width: 40%;" />
        <span style="color: #C0C0C0;margin-left: 10px;">订单完成后返回的地址</span>
      </el-form-item>
      <el-form-item label="异步通知" prop="notifyUrl">
        <el-input v-model="alipayForm.notifyUrl" style="width: 40%;" />
        <span style="color: #C0C0C0;margin-left: 10px;">支付结果异步通知地址</span>
      </el-form-item>
      <el-form-item label="">
        <el-button :loading="loading"  type="primary" @click="alipaySubmitForm" v-hasPermi="['tool:pay:index']">保存配置</el-button>

        <el-button type="success" @click="handleTest" v-hasPermi="['tool:pay:index']">测试支付</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="支付测试" :visible.sync="open" width="500px">
      <el-form ref="form" :model="testForm" :rules="testRules" label-width="80px">
        <el-form-item label="支付类型" prop="payType">
          <el-select v-model="testForm.payType" placeholder="请选择支付类型">
            <el-option
              v-for="item in payTypeList"
              :key="item.value"
              :label="item.lable"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="支付金额" prop="payPrice">
          <el-input-number v-model="testForm.payPrice" controls-position="right" :min="0.01" style="width: 300px;" placeholder="请输入支付金额" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="testSubmitForm">确 定</el-button>
        <el-button @click="testCancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="jsonDialog"  title="异常详情" width="85%">
      <div>{{jsonInfo}}</div>
    </el-dialog>
  </div>
</template>

<script>
import { setConfigKey } from "@/api/system/config";
import { toTestAsAliPay } from "@/api/tool/pay";
export default {
    name: "alipay",
    data() {
      return {
        loading: false,
        jsonDialog: false,
        jsonInfo: '',
        alipayForm: { appId: '', merchantId : '', privateKey: '', publicKey: '', returnUrl: '', notifyUrl: '' },
        testForm: {
          payType: 'web',
          payPrice: ''
        },
        alipayRules: {
          appId: [
            { required: true, message: '请输入appID', trigger: 'blur' }
          ],
          merchantId: [
            { required: true, message: '请输入商家账号', trigger: 'blur' }
          ],
          privateKey: [
            { required: true, message: '商户私钥不能为空', trigger: 'blur' }
          ],
          publicKey: [
            { required: true, message: '支付宝公钥不能为空', trigger: 'blur' }
          ],
          returnUrl: [
            { required: true, message: '回调地址不能为空', trigger: 'blur' }
          ],
          notifyUrl: [
            { required: true, message: '回调地址不能为空', trigger: 'blur' }
          ]
        },
        testRules: {

        },
        // 支付配置显示弹出层
        open: false,
        payTypeList: [
          { value:'web' , lable: 'PC网页支付'},
          { value:'wap' , lable: 'H5手机网页支付'},
          { value:'app' , lable: 'APP支付'},
          { value:'scan' , lable: '扫码支付'},
        ]
      }
    },
  created() {
    this.getConfigKey("sys.pay.alipay").then(response => {
      this.alipayForm = JSON.parse(response.data);
    });
  },
  methods:{
    alipaySubmitForm: function () {
      this.$refs["alipayForm"].validate(valid => {
        if (valid) {
          setConfigKey('sys.pay.alipay',JSON.stringify(this.alipayForm)).then(response => {
            this.msgSuccess("更新配置信息");
            this.configOpen = false;
          });
        }
      })
    },
    testSubmitForm: function () {
      toTestAsAliPay(this.testForm.payType,this.testForm.payPrice).then(response => {
        this.open = false;
        if (response.way == '1'){
          window.open(response.payUrl);
        }else if(response.way == '2'){
          this.jsonDialog = true;
          this.jsonInfo = response.data;
        }else{
          let routeData = this.$router.resolve({ path: '/tool/pay/qrcode', query: { text: response.data}});
          window.open(routeData.href, '_blank');
        }
      }).catch(err => {

      });
    },
    testCancel: function () {
      this.open = false;
    },
    handleTest: function () {
      this.open = true;
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }
</style>
